<template>
	<div id="rolePerm">
		<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="30%">
			<el-form :model="permission" :rules="rules" ref="permission" label-width="100px" class="demo-ruleForm">
				<el-input v-model="permission.id" type="hidden"></el-input>
				<el-form-item label="角色" prop="roleId">
					<el-select v-model="permission.roleId" placeholder="请选择角色">
						<el-option v-for="role in roles" :key="role.id" :label="role.roleName" :value="role.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="类型" prop="resType">
					<el-select v-model="permission.resType" placeholder="请选择资源类型">
						<el-option v-for="restype in restypes" :key="restype.id" :label="restype.type" :value="restype.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="permission.resType==1" label="菜单" prop="resourceId">
					<el-select v-model="permission.resourceId" placeholder="请选择菜单">
						<el-option v-for="menu in menus" :key="menu.id" :label="menu.menuName" :value="menu.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-else label="操作" prop="resourceId">
					<el-select v-model="permission.resourceId" placeholder="请选择操作">
						<el-option v-for="action in actions" :key="action.id" :label="action.actionName" :value="action.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm(permission)">确定</el-button>
					<el-button @click="resetForm(permission)">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
					    <span>添加角色权限</span>
					</div>
					<div class="boxcard-body">
						<el-form :model="permission" :rules="rules" ref="permission" label-width="100px" class="demo-ruleForm">
							<el-form-item label="角色" prop="roleId">
								<el-select v-model="permission.roleId" placeholder="请选择角色">
									<el-option v-for="role in roles" :key="role.id" :label="role.roleName" :value="role.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="类型" prop="resType">
								<el-select v-model="permission.resType" placeholder="请选择资源类型">
									<el-option v-for="restype in restypes" :key="restype.id" :label="restype.type" :value="restype.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="permission.resType==1" label="菜单" prop="resourceId">
								<el-select v-model="permission.resourceId" placeholder="请选择菜单">
									<el-option v-for="menu in menus" :key="menu.id" :label="menu.menuName" :value="menu.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-else label="操作" prop="resourceId">
								<el-select v-model="permission.resourceId" placeholder="请选择操作">
									<el-option v-for="action in actions" :key="action.id" :label="action.actionName" :value="action.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm(permission)">确定</el-button>
								<el-button @click="resetForm(permission)">重置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-card class="box-card">
					<div class="boxcard-body">
						<el-table :data="rolePerms" style="width: 100%;" row-key="id"
							:header-cell-style="{ 'background-color': '#EEEEEE' }">
							<el-table-column prop="id" label="ID"></el-table-column>
							<el-table-column prop="roleId" label="角色名称"></el-table-column>
							<el-table-column prop="resourceId" label="资源名称"></el-table-column>
							<el-table-column label="资源类型">
								<template slot-scope="scope">
									<el-tag>{{ scope.row.resType == 1 ? '菜单' : '操作' }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button type="warning" size="small" @click="updateRolePerm(scope.row)">修改</el-button>
									<el-button type="danger" size="small" @click="deleteRolePerm(scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="pagination">
						<el-pagination background @size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page.currentPage"
							:page-sizes="page.pageSizes"
							:page-size="page.pageSize"
							:total="page.total" 
							layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { get, postJson, postXform } from '@/utils/request.js';
export default {
	created() {
		get('/rolePerm/allRole', {}).then(res => {
			this.roles = res.data.data;
		});
		get('/rolePerm/allMenu', {}).then(res => {
			this.menus = res.data.data;
		});
		get('/rolePerm/allAction', {}).then(res => {
			this.actions = res.data.data;
		});
		this.getlist();
	},
	data() {
		return {
			rolePerms: [],
			dialog: { title: '添加角色权限', visible: false },
			rules: {},
			permission: { id:'', roleId: '', resourceId: '', resType: '' },
			roles: [],
			restypes: [ { id: 1, type: '菜单' }, { id: 2, type: '操作' } ],
			menus: [],
			actions: [],
			page: { currentPage: 1, pageSizes: [10, 20, 50], pageSize: 10, total: 0 }
		}
	},
	methods: {
		async getlist() {
			await get('/rolePerm/pageRolePerm', {
				pageNum: this.page.currentPage,
				pageSize: this.page.pageSize
			}).then(res => {
				this.rolePerms = res.data.data.list;
				this.page.total = Number.parseInt(res.data.data.total);
				this.page.currentPage = res.data.data.pageNum;
			});
		},
		updateRolePerm(row) {
			this.permission = row;
			this.dialog.visible = true;
		},
		deleteRolePerm(row) {
			this.$alert('是否删除？', '删除提示', {
				confirmButtonText: '确定',
				callback: action => {
					postXform('/rolePerm/deleteRolePerm', { id: row.id }).then(res => {
						this.$message({ message: '删除成功', type: 'success' });
						this.getlist();
					});
				}
			});
		},
		submitForm(form) {
			this.permission.id = '';
			this.$refs.permission.validate(valid => {
				if (valid) {
					if (this.permission.id === '') {
						postXform('/rolePerm/addRolePerm', this.permission).then(res => {
							this.dialog.visible = false;
							this.$message({ message: '添加成功', type: 'success' });
							this.getlist();
						});
					} else {
						postXform('/rolePerm/updateRolePerm', this.permission).then(res => {
							this.dialog.visible = false;
							this.$message({ message: '修改成功', type: 'success' });
							this.getlist();
						});
					}
				}
			});
		},
		resetForm(form) {
			this.permission = { id:'', roleId: '', resourceId: '', resType: '' };
		},
		handleSizeChange(val) {
			this.page.pageSize = val;
			this.getlist();
		},
		handleCurrentChange(val) {
			this.page.currentPage = val;
			this.getlist();
		}
	}
};
</script>

<style lang="less">
	.pagination {
		margin: 10px 0;
		position: relative;
		display: flex;
	}
</style>
